<template>
    <div id="biggest-concern">
        <Title title="最受关注" class="title"/>
        <div class="option-card">
            <Options :selecteds = "selecteds" @option-click="optionClick"/>
        </div>
        <div class="content-list">
            <BiggestConcernList :listData="getListData"/>
        </div>
        <div class="button">
            <el-button type="warning" calss="l" plain>查看更多</el-button>
        </div>
    </div>
</template>

<script>
    import Title from "../../../../component/title/Title";
    import Options from "./options/Options";
    import BiggestConcernList from "./list/BiggestConcernList";
    import {Button} from "element-ui";
    export default {
        name: "BiggestConcern",
        components: {
            Title,
            Options,
            BiggestConcernList,
            "el-button": Button
        },
        computed: {
          getListData(){
              return this.biggestConcernListData.filter(item=> item.type === this.id);
          }
        },
        methods: {
            optionClick(id){
                this.id = id;
            }
        },
        data(){
            return{
                id: 1,
                selecteds: [
                    {
                        id: 1,
                        text: '基地'
                    },
                    {
                        id: 2,
                        text: '课程'
                    },
                    {
                        id: 3,
                        text: '线路'
                    },

                ],
                biggestConcernListData: [

                ]
            }
        },
        created() {
            for (let i = 1; i <= 6;i ++){
                this.biggestConcernListData.push(
                    {
                        id: i,
                        text: "我是基地数据",
                        type: 1
                    }
                );
            }
            for (let i = 7; i <=13;i ++){
                this.biggestConcernListData.push(
                    {
                        id: i,
                        text: "我是课程数据",
                        type: 2
                    }
                );
            }
            for (let i = 14; i <= 20;i ++){
                this.biggestConcernListData.push(
                    {
                        id: i,
                        text: "我是线路数据",
                        type: 3
                    }
                );
            }
        }
    }
</script>

<style scoped>
    #biggest-concern{
        margin-right: 230px;
    }
    .title{
        margin-left: 10px;
    }
    .button{
        margin-top: 20px;
        margin-left: 100px;

    }
    .l{
        width: 100px;
        height: 50px;
    }
</style>
